Shadowbox es un visor para medios de comunicación, quizás nos suene más si decimos que se trata de una ventana modal donde podemos mostrar casi cualquier tipo de formato, imágenes, QuickTime, Windows Media Player, Flash, vídeo Flash, HTML y páginas web externas. Resulta muy elegante porque carece de marcos y puede adaptarse a cualquier diseño de blog.
Para utilizar Shadowbox debemos añadir a la plantilla shadowbox.js lo descargamos y lo alojamos en un servidor para obtener la url.
Paso 1º
En plantilla edición de HTML justo después de ]]></b:skin> añadimos lo siguiente:<script src='url-archivo-shadowbox.js' type='text/javascript'/>
En url-archivo-shadowbox.js lo sustituimos por la url que obtenemos al alojar el archivo en nuestro alojamiento.
Paso 2º
Justo después añadimos:<script type='text/javascript'>
Shadowbox.init();
</script>
Paso 3º
A continuación los estilos:<style type='text/css'>
#sb-title-inner,#sb-info-inner,#sb-loading-inner,div.sb-message{font-family:"HelveticaNeue-Light","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:200;color:#fff;}
#sb-container{position:fixed;margin:0;padding:0;top:0;left:0;z-index:999;text-align:left;visibility:hidden;display:none;}
#sb-overlay{position:relative;height:100%;width:100%;}
#sb-wrapper{position:absolute;visibility:hidden;width:100px;}
#sb-wrapper-inner{position:relative;border:1px solid #303030;overflow:hidden;height:100px;}
#sb-body{position:relative;height:100%;}
#sb-body-inner{position:absolute;height:100%;width:100%;}
#sb-player.html{height:100%;overflow:auto;}
#sb-body img{border:none;}
#sb-loading{position:relative;height:100%;}
#sb-loading-inner{position:absolute;font-size:14px;line-height:24px;height:24px;top:50%;margin-top:-12px;width:100%;text-align:center;}
#sb-loading-inner span{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDLVNr2Qo7RobaiBu1AMqqxS9fLutc80PSaurShMbJnZmj4BB39QKUYTS5VW_FEeOUjRMJ7cS2E7FJuXloM0jw0Xc0-URcOwk_FIkdk2UeQhCvoigZSX41PBf0kPEw1LdeZUf6/s1600/loading.gif) no-repeat;padding-left:34px;display:inline-block;}
#sb-body,#sb-loading{background-color:#060606;}
#sb-title,#sb-info{position:relative;margin:0;padding:0;overflow:hidden;}
#sb-title,#sb-title-inner{height:26px;line-height:26px;}
#sb-title-inner{font-size:16px;}
#sb-info,#sb-info-inner{height:20px;line-height:20px;}
#sb-info-inner{font-size:12px;}
#sb-nav{float:right;height:16px;padding:2px 0;width:45%;}
#sb-nav a{display:block;float:right;height:16px;width:16px;margin-left:3px;cursor:pointer;background-repeat:no-repeat;}
#sb-nav-close{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAshPWM9Dtpb7bT0ecym_7mn5L9K-Rhc8Mu97lgKq9eN3VNfN1vIFKpzYJnDCGxQDSQVyffkf1VnO1pvpgSyoQ_O8PH1Y_SxBQdFZhgTON-ExchCcmB1PoeITMkVXtFLMJ57z9/s1600/close.p);}
#sb-nav-next{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg52IVziW_T7FFwuvr3-tRUDLuIeiePb_b_gRSiB9ZeS_inNtZA85J8102xqbg8bMyI-VgFQhBNmGIDaRWGiWcFBdWdKItf_4o0QXd7Dbe2FKZHAAATkWiwmhx6TGNv6mQkgtKH/s1600/next.png);}
#sb-nav-previous{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG64Rr4ErwFta3XNWv3rN2mHfPngbE_2pSpsZZ-xtna8fN2prwtW5Xoj6kmGgLumGW31TwVv1UwHCNzgTv-17PXLjcp_UJW6yYbQOOM1H_tdvni8SV5kKGXsvXt2sLTT8DiUEB/s1600/previous.png);}
#sb-nav-play{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBMgblJfPQNTt0VfbTNwy2ICJvbzTXb2tXYQ11fjNT_Htk3D2q-nlVb_S9mlYTWRISOItJeLEERP7OeV3NkXkzl5WC3GJrh_w6WHxAhpVVI0YCBibA_95U3BV-i18mNWPWbY4i/s1600/play.png);}
#sb-nav-pause{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcWQDbDrw2UFfiPQi9TLl8RRsgkkmU5MOD_7APbGjITOBUUFrRhi7G7S8Cc5ofbanJMRfeuo2yG2fPtok8GK_K8zDHodjYjzRsgqX-spSUbpNWzPtVxn0Vj8MM0aAWAvIX_fBd/s1600/pause.png);}
#sb-counter{float:left;width:45%;}
#sb-counter a{padding:0 4px 0 0;text-decoration:none;cursor:pointer;color:#fff;}
#sb-counter a.sb-counter-current{text-decoration:underline;}
div.sb-message{font-size:12px;padding:10px;text-align:center;}
div.sb-message a:link,div.sb-message a:visited{color:#fff;text-decoration:underline;}
</style>Antes de seguir, comentar la opción de añadir shadowbox.js directamente a la plantilla, con ese paso evitamos alojar el archivo en un servidor externo.
Si optamos por añadirlo en la plantilla lo que haremos será copiar el contenido de este archivo y pegarlo tal y como se indica en el paso 1º es decir, justo después de ]]></b:skin> y nos olvidamos de añadir el archivo externo.
Imagen única
Click en imagen
<a rel="shadowbox" title="Título" href="Url-imagen-grande"><img src="Url-miniatura"/></a>
Si no queremos retocar la imagen para obtener la miniatura también podemos establecer la medida para mostrarla y utilizar la misma url. Esta última opción no es muy recomendable cuando se suben muchas imágenes al blog ya que al hacerlo de esa forma estamos cargando dos veces la misma imagen y a la larga notaremos que la carga es más lenta.
Con width establecemos anchura y con height altura
<a rel="shadowbox" title="Título" href="Url-imagen-grande"><img src="Url-miniatura" height="137" width="170" /></a>
Si retocamos las imágenes bastará con <img src="Url-imagen"/>
A lo largo de esta entrada encontraremos varias veces que el código para mostrar nuestra ventana modal dice "Texto o imagen" quiere eso decir que podemos mostrar la ventana en enlaces de texto o imágenes.
Si queremos mostrar texto no hay mucha explicación escribimos el texto que hará de enlace y listo. Para mostrar una imagen añadiremos: <img src="Url-imagen"/>
:O Uauuu!!!!! Que rico!!!! Gracias Gem@ !!!:P
MUCHISIMAS GRACIAS GEMA!!!!!
AHORA MISMO A PROBARLO Y YA LO VERAS EXPUESTO EN MI BLOG!!!
Hasta videos de youtube!!! es que flipo contigo, te mereces el premio y mil mas!!!
:: Hola MamaNunes me alegra que te guste :D
:: Tómalo con calma Chemita y haz una copia de la plantilla antes de comenzar, no es por nada, simple precaución ;)
Me encantó el de los videos, gracias!!!
Creo que me acomoda mas lo de vagabundia.(aunque tu ventana modal está preciosa.pero mi blog es muy sencillo.y el efecto visual que produce crea un contraste que me parece extraño.al menos por ahora).Aunque lo de vagabundia tiene algunos contras que prefiero analizar antes de implementarlo.(las imagenes se suceden en un lento degradado que cansa la vista y quita la curiosidad del observador hacia las fotografias y sus caracteristicas.además viene con unas viñetas abajo para seleccionar las imagenes. lo que en el caso mas comun, o sea, relativamente pocas fotografias.es absolutamente innecesario.(mas aun tomando en cuenta las enormes aletas que vienen a los lados).
Gracias de nuevo.pensaré un poco y luego decido.Un beso enorme.
Hola gemma, me podes aclarar algo, estos efectos no usa jquery o motools es correcto, eso?
Saludos y un feliz fin de semana,
Henry
:: Estupendo Caa :)
:: juan_santiago la variedad de opciones es para eso para tener donde escoger, siempre se puede seguir buscando :)
:: Henry Herrera que yo sepa no, utiliza unos scripts que se encargan de hacer que ShadowBox sea compatible con la mayoría de frameworks y javascript del momento.
Lo mas funcional acaba siendo la ventana modal.asi que al fin me quedo con esa.Pero antes tengo una duda: si amplio un poquito los margenes laterales del blog no tendré problemas con la hubicacion de las imagenes?? ..y por último: me ayudas con lo de los margenes??.(es que no quiero dejar nada raro, como por ejemplo inclinar el blog al lado izquierdo ;).lo que sucede es que las letras parecen querer escaparse de la pantalla.no me habia dado cuenta de que era visualmente incomodo.pero al entrar seguido, incomoda.Un beso.Dentro de unos dias te cuento el resultado <3 <3 <3
Muy bueno esta ese truco ya hace un tiempo lo venia probando. :D
Tengo una idea mas bien una duda :-I jeje
Hay alguna manera para que ya quede configurado que cada ves que aya una imagen en un post esta se habra con una ventana modal sin ser necesario de estarle poniendo a todas la imagenes el atributo del Shadowbox, digo que todas las imagenes de los post se habran en una ventana modal???
Impresionante Gema!!! Me encanta y como siempre, magníficamente explicado.
Muchas gracias :D
:: juan_santiago la ubicación de las imágenes no tiene nada que ver con la anchura del blog, lo que si hay que tener en cuenta que las imágenes nunca sean de mayor tamaño al espacio donde se encuentran.
Intentaré ver ese problema que me comentas y estaba pendiente ;)
:: Bilosony2™ hasta donde yo sé no hay forma de hacer eso, pero si está la comodidad de añadir el código en plantilla de diseño y cada vez que editas una entrada el código ya está preparado ;)
:: Me alegra que te guste Pequechuches® :D
Amorrrr por favor ajuda-me !!! No consigo locolar uma pagina estatica ou seja externa como la tua.
Me gustaria mucho tene la em mi blog!
I love you!
Eu falei de ti em todos os blogs ,es maravillosa!
Obrigado!
:: Michael Graber ¿te refieres a las páginas del menú?
me encantó Gema es la mejor y más liviana ventana modal que he instalado :D
Esta muy bien lo de la ventana modal. Recién he comenzado con mi blog, ya lo he probado, a ver si lo consigo meter a la página de contacto. Tu blog me sirve de mucha ayuda junto con muchos otros. Gracias.
:: Estupendo Celebfarandula :)
:: Me alegra que te guste David, gracias por tu agradable comentario :)
no entiendo lo que dice de el archivo en el paso 3
:: En el paso 1 dice donde debemos situarnos para comenzar a añadir los scripts, y llegando al paso 3 dice que a continuación es decir justo después de lo que añadimos en el paso 2 añadiremos los estilos.
Los estilos son el código que viene en el paso 3 :)
La verdad, Gema, como lo explicas tú, nadie.
Gracias!... :D
:: Gracias a ti Enrique :D :D
Más bien, tengo una duda. ¿Cómo haría para que, dentro de la ventana modal, aparezca el presentador de Scribd? He intentado de mil maneras y nada.
¡Hola! Soy nuevo en esto de los blogs pero me gustaría mucho añadir este efecto al blog, especialmente para hacer galerías. He seguido detenidamente los pasos que describes, pero me da un mensaje de error que dice así:"Una máscara no puede contener el elemento: script. Sólo se acepta texto y secciones CDATA.Error 500" y hasta aquí puedo leer...
Muchas gracias por compartir este método
www.danielestevema.blogspot.com
:: Daniel Esteve yo lo haría de nuevo siguiendo los pasos uno a uno porque es la primera vez que arroja ese error :S
¡De acuerdo!¡Y Gracias! También es posible que no lo esté haciendo bien lo intentaré de nuevo, en cuanto me funcione te digo algo
¡Vamos a allá!
Gracias de nuevo
¡Hola! ¡Lo pegué mal(realmente es fácil)!¡Ya empiezo a aclararme!
Es genial, me parece increíble...bueno no se me parece que dar las gracias ¡es poco!
Un saludo y un abrazo
www.danielestevema.blogspot.com
:: Daniel Esteve ¿viste? te quedó genial a mí me encanta como trabaja Shadowbox y las posibilidades que tiene :D
¡Sí! Quedo genial, ahora estoy repasándolo, con todo lo que he encontrado por aquí quedará muy bien, ¡muchas gracias!
Ahora puse la navbar que se esconde...
Un saludo
Dani
:: Vaya!! está cundiendo eh Daniel ? :D
Que bueno esto gemaaaaa, ojala me salga para mi nuevo blog de arte, son demasiadas fotos de esculturas y queria algo asi para queno me quede feo un blog que pretende ser muy estetico...
Querida Gema: disulpa mi ignorancia pero hasta el paso 3 entendi todo, todo eso se pega despues de skin en la plantilla html. Yo quiero hacer galeria. Lo que no me queda claro es donde va ese codigo de galeria, y otra cosa que no me queda clara es que url dela imagen grande y chica tengo que poner. Si mal no entendi para no alojarlo en algo externo habia que copiar el codigo de archivo, pero si yo las quiero subir desde la pc? y tengo que hacer por cada imagen una miniatura? Graciassss
:: De algún rincón de este mundo.
El código para la galería o cualquier imagen va donde deseamos mostrarlo, ya sea una entrada,una página estática o un gadget.
Hay una parte que dice:"Si no queremos retocar la imagen para obtener la miniatura también podemos establecer la medida para mostrarla y utilizar la misma url..."
Tienes la opción de subir dos imágenes desde el pc una de tamaño hgrande y otra de tamaño pequeño o también subir sólo la imagen grande y usar la misma url para mostrar la imagen grande y la miniatura, pero tendrás que añadir la medida de la miniatura en el mismo código:
<a rel="shadowbox" title="Título" href="Url-imagen-grande"><img src="Url-imagen" height="137" width="170" /></a>
Tema aparte es el código que digo que se añada a la plantilla para no utilizar sitios externos, no tiene nada que ver ese código con las imágenes que subas para la galería. Ese archivo que hay que copiar es el script para que haga funcionar los efectos.
(Inténtalo en otro blog que utilices para pruebas y paso a paso ) ;)
Ya me salio :D :D :D Y para poner una foto al lado de la otra hay que poner el link uno al lado del otro... es un poco engorroso para tantas imagenes, pero lo voy a usar porque me gusto :S
:: De algún rincón de este mundo así es, una imagen junto a otra forman una galería pero no olvides que para que todas formen parte del mismo grupo debes añadir un nombre a la galería o grupo de imágenes, en el ejemplo puse DEMO1 shadowbox[DEMO1]pero puedes cambiarlo por cualquier otro nombre.
Si que es algo engorroso pero es qu eno hay nada automático para obtener el mismo resultado :)
Sos una genia, siempre lo fuiste.. que bueno haber dado contigo todooooosss estos años. Gracias por las instrucciones.. cuando lo tenga listo lo pongo aqui para que veas como quedó.
PD: no se donde puse ese comentario, pero para que recuerdes quien soy antes aparecia como No te salves. Y mi blog fue o es www.estoycansadodellevarmepuesto.blogspot.com
Ahora ese quedo alli en el olvido hago blogs mas pro gracias a vos
:: Pues que alegría reencontrarte porque ya son muchos años que conozco a No te salves :)
Siempre hay un tiempo para cada cosa y con el blog creo que ocurre lo mismo, cambia la vida y con ella nuestro estado de ánimo y los gustos o las circunstancias que nos hacen escribir :)
SOY NO TE SALVES Logueada en el blog que estoy haciendo
Bueno querida Gema.. aqui hice la galeria, al menos empece, dado que son 500 fotos, obviamente no voy a subir las 500. Pero tengo que subir mas. Ahora me entro el tema de como. Pero necesito consultarte dos cosas.
1) Si entras en diseños grandes verás que si clickeas en la primer foto, no tiene numero y a partir de la segunda foto si tiene numero y la posibilidad de ir pasandolas.
2) A pesar que le puse nombre a la galeria, no aparece en ningun lugar. te dejo la dir para que chequees.
Solo subi diseños grandes por ahora, voy de a poco
http://gustarteenhierro.blogspot.com/
Graciassssss
:: No sale el número de la primera imagen porque añadiste un nombre distinto que al resto del grupo "DEMO1" y a las otras "Hombres".
El título se añade entre los paréntesis de la etiqueta alt=" aquí el título" ;)
(Qué gran trabajo ese de esculturas de hierro)
Ayyyy dioss cuanta inteligencia, tenias razonnnnn.. Viste que buen trabajo. Y todo lo que me falta subir, va a quedar muy pesada yo creo.. pero bueno, desues veré se reparto en enu las fotos, como todavia no se que hacer bien lo deje asi.. aun no esta terminado. Graciass sos lo mas
Hago la presentación oficial de la pagina, espero que gusten de ella, quedo un poco pesada con las fotos, pero son necesarias, ya que para la venta se necesita mostrar todo. Gracias amiga gema por todo. Tu amiga No te salves (juanita)
me olvide la pagina www.gustarteenhierro.blogspot.com
:: Arte en Hierro felicitaciones y que de sus frutos ese sitio :D
:) dios te oiga.. gracias por todo
:: La esperanza unida a la ilusión son ramas poderosas :)
:: Dije ramas??? :O quise decir armas sorry :$
Excelente :D
Queria Gema te envié un mail, no lo recibiste? acerca de las eqtiquetas que aparecian
:: De algún rincón de este mundo no lo he visto porque llevo el correo muy atrasado con esto de las vacaciones de Pascua, si quieres prueba a enviarlo de nuevo :)
Gema, es posible hacer que la ventana de shadowbox aparezca apenas se ingresa al blog? como una especie de pop up
:: Klgo. Alexis Moya R. no tengo respuesta a esa pregunta, lo desconozco :S
Buenas tardes Gem@ en realidad ando necesitando un efecto tipo lightbox, muy sencillo en donde pueda abrir una ventana y manejar sus medidas desde del mismo código ya que tengo diferentes ventanas que abrir, y por ejemplo el lytebox tiene una medida predeterminada desde el .CSS De antemano, Muchas gracias por tu respuesta.
:: No tiene que darme las gracias, siempre es bueno conocer distintas opciones y esta era una de ellas.
Al igual que Lytebox también se añaden los estilos y scripts directamente a la plantilla eso facilita la personalización.
De todas formas la elección de ventana modal es lógicamente según la utilidad que se le va a dar.
Saludos.
Hola Gem@ muchas gracias por tus respuestas. Quisiera saber, donde conseguir un ZIP o RAR de este efecto:
http://bloggingcreativosss.blogspot.com/2010/10/vimeo_14.html
Hola Gema, te escribo en primer lugar para agradecerte por este truquito, y en segundo lugar para que trates de ayudarme a ver porque no funciona en mi blog.
Mi problema en concreto llega cuando quiero poner un video de youtube y cambio la ID del video del ejemplo por la del mío. ¿Tendrá que ver con la plantilla que uso, o con un error mío a la hora de escribir la url del video?
:: Saludos Fantasma Velez, no hay zip ni rar de descarga porque todo está explicado paso a paso en la entrada, la forma de añadir los scripts, el lugar donde añadirlos, el html para mostrar el efecto y los estilos para poder personalizar la ventana si así lo deseamos...
Toda esa explicación sustituye cualquier archivo de descarga que la mayoría de veces no contiene explicaciones.
:: Nowhere Man si me indicas algún ejemplo online donde esté añadido el vídeo localizamos el error :)
Hola Gema: al abrir la miniatura la imagen modal sale cortada .Entiendo que debe ser por el tamaño de la imagen pero no sé como dar con la solucion.Podrias orientarme para que salga toda la imagen al abrirla?
Otra cosa como puedo cambiar la fuente del texto?
saludos y gracias como siempre
se me olvido:mi blog de pruebas por si quieres ver las imagenes:slotenpruebas.blogspot.com
Hola Gema!
Estoy muy agradecido por toda la ayuda que ofreces a los que estamos aprendiendo. Nos haces la vida más fácil.
Me gusta mucho el efecto de imagen "iluminada" que has hecho en la galería del shadowbox, que se activa cuando pasas el ratón por encima. ¿Cómo lo has conseguido?
Estoy mirando por todos lados pero no haces referencia en esta entrada sobre dicho efecto, ¿verdad?
Muchas gracias!!
Un saludo
Hola GEMA se este post es antiguo pero queria hacerte una pregunta, Como hago para añadir la imagen sobre el video?
Tu indicas esto:
Y lo mostraríamos así:
Texto o imagen
pero hay que añadir algun otro codigo para colocar una imagen sobre el video? Gracias.
Siento no ver tu comentario antes, por si todavía te sirve te diré la imagen no se añade sobre el vídeo sino que hace de enlace para mostrar el vídeo.
Se añade con la etiqueta de imagen sustituyendo el texto que hace de enlace:
<a rel="shadowbox" title="Título" href="Url-imagen-grande"><img src="Url-miniatura-a mostrar" height="137" width="170" /></a>
Respuesta para: Localiza Recursos Sociales en el Municipio de Oviedo.
Lamento que se haya eliminado tu comentario pero tuve un error y al subsanarlo se elimina el tuyo.
La respuesta es no, no funciona en el formulario de comentarios porque el enlace lo acepta como un enlace normal, es decir te dirige al sitio pero no muestra la ventana.
Buen día Gem@:Serías tan amable de indicarme,de donde sacaste la foto para el vídeo?Es que es la misma.¿Dónde se encuentra para poder añadir la misma imagen del vídeo que quieras ver?
Muchas gracias
Después de tocar, por aquí y por allá en youtube
conseguí sacar las imágenes.Disculpa
Siempre te pregunto antes de intentar encontrar la solución.
Un saludo
Me alegra esté resuelto y lamento la tardanza :S
Nota: solo los miembros de este blog pueden publicar comentarios.